<template>
    <div class="content">
        <div class="title-item">
            <span>定点医疗机构物资</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="1">
                    医疗物资
                </van-col>
                <van-col span="1">
                    N95
                </van-col>
                <van-col span="1">
                    防护服
                </van-col>
                <van-col span="1">
                    防护面罩
                </van-col>
                <van-col span="1">
                    防冲击眼罩
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col class="color-blue" span="1">
                    在院库存
                </van-col>
                <van-col class="color-blue" span="1">
                    {{N95_sum.Inventory}}
                </van-col>
                <van-col class="color-blue" span="1">
                    {{shirt_sum.Inventory}}
                </van-col>
                <van-col class="color-blue" span="1">
                    {{face_sum.Inventory}}
                </van-col>
                <van-col class="color-blue" span="1">
                    {{fcjyz_sum.Inventory}}
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col class="color-orange" span="1">
                    消耗天数
                </van-col>
                <van-col class="color-orange" span="1">
                    {{N95_sum.con_days}}
                </van-col>
                <van-col class="color-orange" span="1">
                    {{shirt_sum.con_days}}
                </van-col>
                <van-col class="color-orange" span="1">
                    {{face_sum.con_days}}
                </van-col>
                <van-col class="color-orange" span="1">
                    {{fcjyz_sum.con_days}}
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>市级定点</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="1">
                    医疗机构
                </van-col>
                <van-col span="1">
                    N95
                </van-col>
                <van-col span="1">
                    防护服
                </van-col>
                <van-col span="1">
                    防护面罩
                </van-col>
                <van-col span="1">
                    防冲击眼罩
                </van-col>
            </van-row>
            <van-row class="table-item" v-for="(item,index) in sjdd" :key="index">
                <van-col span="1">
                    {{item.hosp_name}}
                </van-col>
                <van-col span="1">
                    {{item.n95_Inventory}}
                </van-col>
                <van-col span="1">
                    {{item.shirt_Inventory}}
                </van-col>
                <van-col span="1">
                    {{item.face_Inventory}}
                </van-col>
                <van-col span="1">
                    {{item.eye_num}}
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>市级两中心</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="1">
                    医疗机构
                </van-col>
                <van-col span="1">
                    N95
                </van-col>
                <van-col span="1">
                    防护服
                </van-col>
                <van-col span="1">
                    防护面罩
                </van-col>
                <van-col span="1">
                    防冲击眼罩
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="1">
                    市急救中心
                </van-col>
                <van-col span="1">
                    {{zx1.n95_Inventory}}
                </van-col>
                <van-col span="1">
                    {{zx1.shirt_Inventory}}
                </van-col>
                <van-col span="1">
                    {{zx1.face_Inventory}}
                </van-col>
                <van-col span="1">
                    {{zx1.eye_num}}
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="1">
                    市疾控中心
                </van-col>
                <van-col span="1">
                    {{zx2.n95_Inventory}}
                </van-col>
                <van-col span="1">
                    {{zx2.shirt_Inventory}}
                </van-col>
                <van-col span="1">
                    {{zx2.face_Inventory}}
                </van-col>
                <van-col span="1">
                    {{zx2.eye_num}}
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>省级定点</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="1">
                    医疗机构
                </van-col>
                <van-col span="1">
                    N95
                </van-col>
                <van-col span="1">
                    防护服
                </van-col>
                <van-col span="1">
                    防护面罩
                </van-col>
                <van-col span="1">
                    防冲击眼罩
                </van-col>
            </van-row>
            <van-row class="table-item" v-for="(item,index) in sjddpro" :key="index">
                <van-col span="1">
                    {{item.hosp_name}}
                </van-col>
                <van-col span="1">
                    {{item.n95_Inventory}}
                </van-col>
                <van-col span="1">
                    {{item.shirt_Inventory}}
                </van-col>
                <van-col span="1">
                    {{item.face_Inventory}}
                </van-col>
                <van-col span="1">
                    {{item.eye_num}}
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>全市防疫物资</span>
        </div>
        <div class="table-div qsfywz">
            <van-row class="table-item">
                <van-col span="4">
                    <van-icon name="star-o" /><br/>
                    N95口罩
                </van-col>
                <van-col span="20">
                    <van-col span="1">
                        <van-col span="24">储备库</van-col>
                        <van-col class="color-blue" span="24">{{N95_mid.Inventory}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">捐赠</van-col>
                        <van-col class="color-oranged"  span="24">{{N95_mid.donation}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">生产</van-col>
                        <van-col class="color-orange"  span="24">{{N95_mid.production}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">采购</van-col>
                        <van-col class="color-green"  span="24">{{N95_mid.purchase}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">日消耗</van-col>
                        <van-col class="color-gray"  span="24">{{N95_mid.use}}</van-col>
                    </van-col>
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="4">
                    <van-icon name="star-o" /><br/>
                    防护服
                </van-col>
                <van-col span="20">
                    <van-col span="1">
                        <van-col span="24">储备库</van-col>
                        <van-col class="color-blue" span="24">{{fhf_mid.Inventory}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">捐赠</van-col>
                        <van-col class="color-oranged"  span="24">{{fhf_mid.donation}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">生产</van-col>
                        <van-col class="color-orange"  span="24">{{fhf_mid.production}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">采购</van-col>
                        <van-col class="color-green"  span="24">{{fhf_mid.purchase}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">日消耗</van-col>
                        <van-col class="color-gray"  span="24">{{fhf_mid.use}}</van-col>
                    </van-col>
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="4">
                    <van-icon name="star-o" /><br/>
                    防护面罩
                </van-col>
                <van-col span="20">
                    <van-col span="1">
                        <van-col span="24">储备库</van-col>
                        <van-col class="color-blue" span="24">{{fhmj_mid.Inventory}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">捐赠</van-col>
                        <van-col class="color-oranged"  span="24">{{fhmj_mid.donation}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">生产</van-col>
                        <van-col class="color-orange"  span="24">{{fhmj_mid.production}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">采购</van-col>
                        <van-col class="color-green"  span="24">{{fhmj_mid.purchase}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">日消耗</van-col>
                        <van-col class="color-gray"  span="24">{{fhmj_mid.use}}</van-col>
                    </van-col>
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="4">
                    <van-icon name="star-o" /><br/>
                    医用手套
                </van-col>
                <van-col span="20">
                    <van-col span="1">
                        <van-col span="24">储备库</van-col>
                        <van-col class="color-blue" span="24">{{ycxst_mid.Inventory}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">捐赠</van-col>
                        <van-col class="color-oranged"  span="24">{{ycxst_mid.donation}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">生产</van-col>
                        <van-col class="color-orange"  span="24">{{ycxst_mid.production}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">采购</van-col>
                        <van-col class="color-green"  span="24">{{ycxst_mid.purchase}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">日消耗</van-col>
                        <van-col class="color-gray"  span="24">{{ycxst_mid.use}}</van-col>
                    </van-col>
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="4">
                    <van-icon name="star-o" /><br/>
                    医用口罩
                </van-col>
                <van-col span="20">
                    <van-col span="1">
                        <van-col span="24">储备库</van-col>
                        <van-col class="color-blue" span="24">{{kz_mid.Inventory}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">捐赠</van-col>
                        <van-col class="color-oranged"  span="24">{{kz_mid.donation}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">生产</van-col>
                        <van-col class="color-orange"  span="24">{{kz_mid.production}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">采购</van-col>
                        <van-col class="color-green"  span="24">{{kz_mid.purchase}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">日消耗</van-col>
                        <van-col class="color-gray"  span="24">{{kz_mid.use}}</van-col>
                    </van-col>
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="4">
                    <van-icon name="star-o" /><br/>
                    消毒液
                </van-col>
                <van-col span="20">
                    <van-col span="1">
                        <van-col span="24">储备库</van-col>
                        <van-col class="color-blue" span="24">{{xdy_mid.Inventory}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">捐赠</van-col>
                        <van-col class="color-oranged"  span="24">{{xdy_mid.donation}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">生产</van-col>
                        <van-col class="color-orange"  span="24">{{xdy_mid.production}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">采购</van-col>
                        <van-col class="color-green"  span="24">{{xdy_mid.purchase}}</van-col>
                    </van-col>
                    <van-col span="1">
                        <van-col span="24">日消耗</van-col>
                        <van-col class="color-gray"  span="24">{{xdy_mid.use}}</van-col>
                    </van-col>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>药品市场供应销售</span>
        </div>
        <div class="chart-div">
            <van-row class="bg-white">
                <van-col span="12">
                    <div id="medicine_1" class="chart-item-1"></div>
                </van-col>
                <van-col span="12">
                    <div class="medicine-item">
                        <van-row>
                            <van-col span="24">
                                退热类
                            </van-col>
                            <van-col span="8">
                                购买人数<br/>
                                {{trlList.num_buyers}}
                            </van-col>
                            <van-col span="8">
                                销售<br/>
                                {{trlList.sale}}<br/>
                            </van-col>
                            <van-col span="8">
                                库存<br/>
                                {{trlList.stock}}
                            </van-col>
                            <van-col span="8" offset="3">
                                购买环比<br/>
                                {{ trlList.num_buyers_ratio }}%
                            </van-col>
                            <van-col span="8" offset="2">
                                销售环比<br/>
                                {{trlList.sale_buyers_ratio}}%
                            </van-col>
                        </van-row>
                    </div>
                </van-col>
            </van-row>
            <van-row class="bg-white">
                <van-col span="12">
                    <div id="medicine_2" class="chart-item-1"></div>
                </van-col>
                <van-col span="12" >
                    <div class="medicine-item">
                        <van-row>
                            <van-col span="24">
                                奥司他韦类
                            </van-col>
                            <van-col span="8">
                                购买人数<br/>
                                {{astwlList.num_buyers}}
                            </van-col>
                            <van-col span="8">
                                销售<br/>
                                {{astwlList.sale}}
                            </van-col>
                            <van-col span="8">
                                库存<br/>
                                {{astwlList.stock}}
                            </van-col>
                            <van-col span="8" offset="3">
                                购买环比<br/>
                                {{astwlList.num_buyers_ratio}}%
                            </van-col>
                            <van-col span="8" offset="2">
                                销售环比<br/>
                                {{astwlList.sale_buyers_ratio}}%
                            </van-col>
                        </van-row>
                    </div>
                </van-col>
            </van-row>
            <van-row class="bg-white">
                <van-col span="12">
                    <div id="medicine_3" class="chart-item-1"></div>
                </van-col>
                <van-col span="12" >
                    <div class="medicine-item">
                        <van-row>
                            <van-col span="24">
                                莲花清瘟
                            </van-col>
                            <van-col span="8">
                                购买人数<br/>
                                {{lhqwList.num_buyers}}
                            </van-col>
                            <van-col span="8">
                                销售<br/>
                                {{lhqwList.sale}}
                            </van-col>
                            <van-col span="8">
                                库存<br/>
                                {{lhqwList.stock}}
                            </van-col>
                            <van-col span="8" offset="3">
                                购买环比<br/>
                                {{lhqwList.num_buyers_ratio}}%
                            </van-col>
                            <van-col span="8" offset="2">
                                销售环比<br/>
                                {{lhqwList.sale_buyers_ratio}}%
                            </van-col>
                        </van-row>
                    </div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>物资生产</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="4">
                    产品
                </van-col>
                <van-col span="4">
                    厂家
                </van-col>
                <van-col span="4">
                    日产量
                </van-col>
                <van-col span="4">
                    日库存
                </van-col>
                <van-col span="4">
                    日产能
                </van-col>
                <van-col span="4">
                    问题需求
                </van-col>
            </van-row>
            <van-row class="table-item" v-for="(item,index) in wzsc" :key="index">
                <van-col span="4">
                    {{item.pro_materials}}
                </van-col>
                <van-col span="4">
                    {{item.manufacturer}}
                </van-col>
                <van-col span="4">
                    {{item.dai_output}}
                </van-col>
                <van-col span="4">
                    {{item.stock}}
                </van-col>
                <van-col span="4">
                    {{item.capacity}}
                </van-col>
                <van-col span="4">
                    {{item.pro_demand}}
                </van-col>
            </van-row>
<!--            <van-row class="table-item">-->
<!--                <van-col span="4">-->
<!--                    隔离衣-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="4">-->
<!--                    干扰素-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="4">-->
<!--                    N95口罩-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="4">-->
<!--                    消毒液-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="4">-->
<!--                    医用口罩-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="4">-->
<!--                    0-->
<!--                </van-col>-->
<!--            </van-row>-->
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>物资采购</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="6">
                    产品
                </van-col>
                <van-col span="6">
                    数量
                </van-col>
                <van-col span="6">
                    供应商
                </van-col>
                <van-col span="6">
                    状态
                </van-col>
            </van-row>
            <van-row class="table-item" v-for="(item,index) in wzcg" :key="index">
                <van-col span="6">
                    {{item.pro_materials}}
                </van-col>
                <van-col span="6">
                    {{item.number}}
                </van-col>
                <van-col span="6">-
                </van-col>
                <van-col span="6">
                    {{item.pro_status}}
                </van-col>
            </van-row>
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    防护服-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!-- - -->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    在途-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    防护面罩-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!-- - -->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    在途-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    防护眼镜-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!-- - -->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    在途-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    隔离衣-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!-- - -->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    在途-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    红外线测温仪-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!-- - -->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    在途-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    N95口罩-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!-- - -->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    在途-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    试剂盒-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!-- - -->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    在途-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    消毒液-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!-- - -->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    在途-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    医用口罩-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!-- - -->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    在途-->
<!--                </van-col>-->
<!--            </van-row>-->
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>物资捐赠</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="6">
                    物品
                </van-col>
                <van-col span="6">
                    数量
                </van-col>
                <van-col span="6">
                    来源
                </van-col>
                <van-col span="6">
                    状态
                </van-col>
            </van-row>
            <van-row class="table-item" v-for="(item,index) in wzjz" :key="index">
                <van-col span="6">
                    {{item.don_goods}}
                </van-col>
                <van-col span="6">
                    {{item.don_number}}
                </van-col>
                <van-col span="6">
                    {{item.don_unit}}
                </van-col>
                <van-col span="6">
                    {{item.don_status}}
                </van-col>
            </van-row>
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    医用口罩-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    社会捐赠-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    库存-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    医用手套-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    社会捐赠-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    库存-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    测温枪-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    社会捐赠-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    库存-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    消毒液-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    社会捐赠-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    库存-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    试剂盒-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    社会捐赠-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    库存-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    资金-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    1434046.9-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    社会捐赠-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    库存-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    防护服-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    社会捐赠-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    库存-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    防护眼镜-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    社会捐赠-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    库存-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="6">-->
<!--                    隔离衣-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    0-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    社会捐赠-->
<!--                </van-col>-->
<!--                <van-col span="6">-->
<!--                    库存-->
<!--                </van-col>-->
<!--            </van-row>-->
            <div class="divider"></div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { facesumList, fcjyzsumList, fhfmidList, fhmjmidList, kzmidList, N95midList,
  N95sumList, shirtsumList, sjddList, sjddproList, wzcgList, wzjzList, wzscList,
  xdymidList, ycxstmidList, zxList, astwlList, lhqwList, trlList } from '@/api/material-guarantee'
import { Dialog } from 'vant'
export default {
  name: 'index',
  data () {
    return {
      face_sum: [],
      fcjyz_sum: [],
      N95_sum: [],
      shirt_sum: [],
      sjdd: [],
      zx1: [],
      zx2: [],
      sjddpro: [],
      fhf_mid: [],
      N95_mid: [],
      fhmj_mid: [],
      kz_mid: [],
      ycxst_mid: [],
      xdy_mid: [],
      wzsc: [],
      wzcg: [],
      wzjz: [],
      astwlList: [],
      lhqwList: [],
      trlList: []
    }
  },
  methods: {
    // 全国
    init () {
      /**
       * facesumList防护面罩
       */
      facesumList().then(ret => {
        if (ret.data.errcode === 0) {
          this.face_sum = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * 防冲击眼罩
       */
      fcjyzsumList().then(ret => {
        if (ret.data.errcode === 0) {
          this.fcjyz_sum = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * N95
       */
      N95sumList().then(ret => {
        if (ret.data.errcode === 0) {
          this.N95_sum = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * shirtsumList防护服
       */
      shirtsumList().then(ret => {
        if (ret.data.errcode === 0) {
          this.shirt_sum = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * sjddList市级定点
       */
      sjddList().then(ret => {
        if (ret.data.errcode === 0) {
          this.sjdd = ret.data.data
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * zxList是市级两中心
       */
      zxList().then(ret => {
        if (ret.data.errcode === 0) {
          this.zx1 = ret.data.data[0]
          this.zx2 = ret.data.data[1]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * sjddproList省级定点
       */
      sjddproList().then(ret => {
        if (ret.data.errcode === 0) {
          this.sjddpro = ret.data.data
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * N95id全市防疫物资
       */
      N95midList().then(ret => {
        if (ret.data.errcode === 0) {
          this.N95_mid = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       *全市防疫物资 防护服
       */
      fhfmidList().then(ret => {
        if (ret.data.errcode === 0) {
          this.fhf_mid = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * fhmjmidList全市防疫物资 防护面罩
       */
      fhmjmidList().then(ret => {
        if (ret.data.errcode === 0) {
          this.fhmj_mid = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * ycxstmidList全市防疫物资 医用手套
       */
      ycxstmidList().then(ret => {
        if (ret.data.errcode === 0) {
          this.ycxst_mid = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * kzmidList全市防疫物资 医用口罩
       */
      kzmidList().then(ret => {
        if (ret.data.errcode === 0) {
          this.kz_mid = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * xdymidList全市防疫物资 消毒液
       */
      xdymidList().then(ret => {
        if (ret.data.errcode === 0) {
          this.xdy_mid = ret.data.data[0]
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * wzscList物资生产
       */
      wzscList().then(ret => {
        if (ret.data.errcode === 0) {
          this.wzsc = ret.data.data
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * wzcgList物资采购
       */
      wzcgList().then(ret => {
        if (ret.data.errcode === 0) {
          this.wzcg = ret.data.data
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * wzjzList物资捐赠
       */
      wzjzList().then(ret => {
        if (ret.data.errcode === 0) {
          this.wzjz = ret.data.data
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // /**
      //  * kzmidList
      //  */
      // kzmidList().then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.kz_mid = ret.data.data[0].kz_mid
      //   } else {
      //     Dialog.alert({
      //       message: ret.data.errmsg
      //     }).then(() => {
      //       // on close
      //     })
      //   }
      // })
      // /**
      //  * N95id
      //  */
      // N95midList().then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.N95_mid = ret.data.data[0].N95_mid
      //   } else {
      //     Dialog.alert({
      //       message: ret.data.errmsg
      //     }).then(() => {
      //       // on close
      //     })
      //   }
      // })
      // /**
      //  * sjddproList
      //  */
      // sjddproList().then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.sjdd = ret.data.data[0].sjdd
      //   } else {
      //     Dialog.alert({
      //       message: ret.data.errmsg
      //     }).then(() => {
      //       // on close
      //     })
      //   }
      // })
      //
      // /**
      //  * xdymidList
      //  */
      // xdymidList().then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.xdy_mid = ret.data.data[0].xdy_mid
      //   } else {
      //     Dialog.alert({
      //       message: ret.data.errmsg
      //     }).then(() => {
      //       // on close
      //     })
      //   }
      // })
      // /**
      //  * ycxstmidList
      //  */
      // ycxstmidList().then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.ycxst_mid = ret.data.data[0].ycxst_mid
      //   } else {
      //     Dialog.alert({
      //       message: ret.data.errmsg
      //     }).then(() => {
      //       // on close
      //     })
      //   }
      // })
      // /**
      //  * zxList
      //  */
      // zxList().then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.zx = ret.data.data[0].zx
      //   } else {
      //     Dialog.alert({
      //       message: ret.data.errmsg
      //     }).then(() => {
      //       // on close
      //     })
      //   }
      // })
      /**
       * astwlList奥司他韦类
       */
      astwlList().then(ret => {
        if (ret.data.errcode === 0) {
          this.astwlList = ret.data.data[0]
          this.medicine_2()
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * lhqwList莲花清瘟
       */
      lhqwList().then(ret => {
        if (ret.data.errcode === 0) {
          this.lhqwList = ret.data.data[0]
          this.medicine_3()
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      /**
       * trlList退热类
       */
      trlList().then(ret => {
        if (ret.data.errcode === 0) {
          this.trlList = ret.data.data[0]
          this.medicine_1()
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // /**
      //  * ypscgyxsList
      //  */
      // ypscgyxsList().then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.ypscgyxsList = ret.data.data[0]
      //   } else {
      //     Dialog.alert({
      //       message: ret.data.errmsg
      //     }).then(() => {
      //       // on close
      //     })
      //   }
      // })
    },
    medicine_1 () {
      let myChart = echarts.init(document.getElementById('medicine_1'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left',
        //   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        // },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            center: ['50%', '40%'],
            data: [
              { value: this.trlList.sale, name: '销售' },
              { value: this.trlList.stock, name: '库存' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    medicine_2 () {
      let myChart = echarts.init(document.getElementById('medicine_2'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left',
        //   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        // },
        color: [ '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            center: ['50%', '40%'],
            data: [
              { value: this.astwlList.sale, name: '库存' },
              { value: this.astwlList.stock, name: '销售' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    medicine_3 () {
      let myChart = echarts.init(document.getElementById('medicine_3'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: [ '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        // legend: {
        //   orient: 'vertical',
        //   left: 'left',
        //   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        // },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            center: ['50%', '40%'],
            data: [
              { value: this.lhqwList.sale, name: '销售' },
              /* { value: 385, name: '购买人数' }, */
              { value: this.lhqwList.stock, name: '库存' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    }
  },
  mounted () {
    // this.medicine_1()
    // this.medicine_2()
    // this.medicine_3()
    this.init()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    .chart-item-1{
        width: 100%;
        height: 130px;
    }
    .chart-item{
        width: 100%;
        height: 300px;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item span{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
        display: flex;
        align-items: center;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .table-div{
        padding: 0 10px;
    }
    .van-col {
        padding: 10px 0;
    }
    .content >>> .van-progress__pivot{
        background-color: initial !important;
        color: #ffffff;
    }
    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag{
        margin-right: 1px;
    }
    .color-oranged{
        color: orangered;
    }
    .color-orange{
        color: orange;
    }
    .color-green{
        color: rgb(40, 183, 163);
    }
    .color-gray{
        color: gray;
    }
    .color-blue{
        color: blue;
    }
    .color-purple{
        color: purple;
    }
    .van-col--1{
        width: 20%;
    }
    .qsfywz .table-item{
        padding: 5px 0 5px 10px;
        background-color: #ffffff !important;
        border: 1px solid #dddddd;
        margin-bottom: 5px;
    }
    .qsfywz .van-col{
        padding: 0;
    }
    .qsfywz .van-col--4{
        height: 40px;
        width: 40px;
        background-color: #7c78a4;
        color: #ffffff;
        padding: 5px 0;
        font-size: 8px;
    }
    .van-icon-star-o{
        font-size: 16px;
    }
    .qsfywz .van-col--24{
        height: 20px;
        line-height: 20px;
    }
    .medicine-item{
        padding: 5px;
    }
    .medicine-item .van-row{
        border: 1px solid #dddddd;
        padding: 5px;
    }
    .medicine-item .van-col{
        padding: 0;
        text-align: center;
        font-size: 10px;
    }
    .chart-div{
        padding: 0 10px;
    }
    .chart-div .chart-item-1,.chart-div .chart-item{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin-top: 10px;
    }
    .mb10{
        margin-bottom: 10px;
    }
    .bg-white{
        display: flex;
        align-items: center;
        padding-top: 10px;
    }
    .bg-white .van-col{
        padding: 0;
    }
</style>
